@use '../../shared/_common';

.ais-ChatMessages {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ais-ChatMessages-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  padding: var(--ais-spacing);
}

.ais-ChatMessages-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ais-spacing) * 1.5);
  width: 100%;

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--ais-transition-duration)
        var(--ais-transition-timing-function),
      filter var(--ais-transition-duration)
        var(--ais-transition-timing-function);
  }
}

.ais-ChatMessages-content--clearing {
  opacity: 0;
  filter: blur(8px);
}

.ais-ChatMessages-scrollToBottom {
  position: absolute;
  bottom: var(--ais-spacing);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--ais-spacing) * 1.5);
  height: calc(var(--ais-spacing) * 1.5);
  border-radius: var(--ais-border-radius-full);

  @media (prefers-reduced-motion: no-preference) {
    transition: background-color var(--ais-transition-duration)
        var(--ais-transition-timing-function),
      transform var(--ais-transition-duration)
        var(--ais-transition-timing-function),
      opacity var(--ais-transition-duration)
        var(--ais-transition-timing-function);
  }
}

.ais-ChatMessages-scrollToBottom--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(var(--ais-spacing)) scale(0.95);
}
